<template>
  <div
    class="originProject preview-form"
    style=" background:rgba(255, 255, 255, 0);"
  >
    <Row :gutter="20" style=" margin-bottom:20px;">
      <Col :span="6">
        <div class="comCard">
          <Card dis-hover style=" background:#2DC7C9; padding:20px;">
            <Row :gutter="10">
              <Col :span="8">
                <div class="comIcon">
                  <Icon type="md-thumbs-up" :size="70" color="#FFFFFF" />
                </div>
              </Col>
              <Col :span="16">
                <div class="comText">
                  <div
                    style=" color:#FFFFFF; font-size:20px; font-weight:bold;"
                  >
                    销售总额
                  </div>
                </div>
                <div class="comText">
                  <div
                    style=" color:#FFFFFF; font-size:30px; font-weight:bold;"
                  >
                    35,68759
                  </div>
                </div>
              </Col>
            </Row>
          </Card>
        </div>
      </Col>
      <Col :span="6">
        <div class="comCard">
          <Card dis-hover style=" background:#5AB1EE; padding:20px;">
            <Row :gutter="10">
              <Col :span="8">
                <div class="comIcon">
                  <Icon type="md-analytics" :size="70" color="#FFFFFF" />
                </div>
              </Col>
              <Col :span="16">
                <div class="comText">
                  <div
                    style=" color:#FFFFFF; font-size:20px; font-weight:bold;"
                  >
                    交易量
                  </div>
                </div>
                <div class="comText">
                  <div
                    style=" color:#FFFFFF; font-size:30px; font-weight:bold;"
                  >
                    567,73456
                  </div>
                </div>
              </Col>
            </Row>
          </Card>
        </div>
      </Col>
      <Col :span="6">
        <div class="comCard">
          <Card dis-hover style=" background:#B6A2DE; padding:20px;">
            <Row :gutter="10">
              <Col :span="8">
                <div class="comIcon">
                  <Icon type="md-cloud-upload" :size="70" color="#FFFFFF" />
                </div>
              </Col>
              <Col :span="16">
                <div class="comText">
                  <div
                    style=" color:#FFFFFF; font-size:20px; font-weight:bold;"
                  >
                    上传量
                  </div>
                </div>
                <div class="comText">
                  <div
                    style=" color:#FFFFFF; font-size:30px; font-weight:bold;"
                  >
                    89,43098
                  </div>
                </div>
              </Col>
            </Row>
          </Card>
        </div>
      </Col>
      <Col :span="6">
        <div class="comCard">
          <Card dis-hover style=" background:#E89D5F; padding:20px;">
            <Row :gutter="10">
              <Col :span="8">
                <div class="comIcon">
                  <Icon type="md-cloud-download" :size="70" color="#FFFFFF" />
                </div>
              </Col>
              <Col :span="16">
                <div class="comText">
                  <div
                    style=" color:#FFFFFF; font-size:20px; font-weight:bold;"
                  >
                    下载量
                  </div>
                </div>
                <div class="comText">
                  <div
                    style=" color:#FFFFFF; font-size:30px; font-weight:bold;"
                  >
                    129,34857
                  </div>
                </div>
              </Col>
            </Row>
          </Card>
        </div>
      </Col>
    </Row>
    <Row :gutter="20">
      <Col :span="12">
        <div class="comCard">
          <Card dis-hover style=" padding:20px; overflow:auto;">
            <div class="comBarChart">
              <div ref="barChartBar" style=" width:100%; height:400px; "></div>
            </div>
          </Card>
        </div>
      </Col>
      <Col :span="12">
        <div class="comCard">
          <Card dis-hover style=" padding:20px;">
            <div class="comPieChart">
              <div ref="pieChartPie" style=" width:100%; height:400px; "></div>
            </div>
          </Card>
        </div>
      </Col>
    </Row>
    <div class="comCard">
      <Card dis-hover style=" padding:20px; margin-top:20px;">
        <div class="comLineChart">
          <div ref="lineChartLine" style=" width:100%; height:400px; "></div>
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import selfComponents from "@/components/comm/dtTable/components";
import echarts from "echarts";
import { areaValue, areaData } from "@/libs/common";
import { chartOn, chartOff } from "@/libs/tools";
import area from "@/components/comm/area";

export default {
  components: {
    ...selfComponents,
  },
  data() {
    return {
      barChartData: [],
      barChartChartOptions: {
        backgroundColor: "",
        title: {
          show: true,
          text: "这是标题",
          subtext: "这是一个副标题",
          left: "left",
          textStyle: { color: "#333", fontSize: 18, fontStyle: "normal" },
          subtextStyle: { color: "#aaa", fontSize: 12, fontStyle: "normal" },
        },
        legend: {
          show: true,
          left: "center",
          orient: "horizontal",
          data: ["收入", "支出"],
        },
        tooltip: {
          show: true,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          padding: 5,
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          axisPointer: { type: "none" },
        },
        xAxis: {
          type: "category",
          data: [
            { value: "星期一", textStyle: { fontSize: 12, color: "" } },
            { value: "星期二", textStyle: { fontSize: 12, color: "" } },
            { value: "星期三", textStyle: { fontSize: 12, color: "" } },
            { value: "星期四", textStyle: { fontSize: 12, color: "" } },
            { value: "星期五", textStyle: { fontSize: 12, color: "" } },
            { value: "星期六", textStyle: { fontSize: 12, color: "" } },
            { value: "星期日", textStyle: { fontSize: 12, color: "" } },
          ],
        },
        yAxis: { type: "value" },
        series: [
          {
            name: "收入",
            type: "bar",
            stack: null,
            label: {
              show: true,
              color: "#fff",
              fontSize: 12,
              position: "inside",
              distance: 5,
            },
            data: [120, 200, 150, 80, 70, 110, 130],
          },
          {
            name: "支出",
            type: "bar",
            stack: null,
            data: [20, 50, 150, 90, 70, 410, 30],
          },
        ],
      },
      barChartTheme: "macarons",
      barChartEcharts: "",
      pieChartData: [],
      pieChartChartOptions: {
        backgroundColor: "",
        title: {
          show: true,
          text: "这是标题",
          subtext: "这是一个副标题",
          left: "center",
          textStyle: { color: "#333", fontSize: 18, fontStyle: "normal" },
          subtextStyle: { color: "#aaa", fontSize: 12, fontStyle: "normal" },
        },
        tooltip: {
          show: true,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          padding: 5,
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          axisPointer: { type: "none" },
        },
        legend: {
          show: true,
          orient: "vertical",
          left: "left",
          data: ["账户余额", "待还款项", "待回购收益"],
        },
        series: [
          {
            name: "款项统计",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 0, name: "账户余额" },
              { value: 0, name: "待还款项" },
              { value: 0, name: "待回购收益" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      pieChartTheme: "macarons",
      pieChartEcharts: "",
      lineChartData: [],
      lineChartChartOptions: {
        backgroundColor: "",
        title: {
          show: true,
          text: "这是标题",
          subtext: "这是一个副标题",
          left: "left",
          textStyle: { color: "#333", fontSize: 18, fontStyle: "normal" },
          subtextStyle: { color: "#aaa", fontSize: 12, fontStyle: "normal" },
        },
        legend: { show: true, left: "right", orient: "horizontal" },
        tooltip: {
          show: true,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          padding: 5,
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          axisPointer: { type: "none" },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: { type: "value" },
        series: [
          { data: [820, 932, 901, 934, 1290, 1330, 1320], type: "line" },
        ],
      },
      lineChartTheme: "macarons",
      lineChartEcharts: "",
      pageRecordId: "414",
      adminAddress: "http://test.xundacloud.com:8081/xundacloudDemeAdmin",
      area,
    };
  },
  mounted() {
    this.barChartGetChartData();
    this.pieChartGetChartData();
    this.lineChartGetChartData();
  },
  methods: {
    async barChartGetChartData(params = {}) {
      this.$nextTick(() => this.barChartInit());
    },
    barChartInit() {
      this.barChartEcharts = echarts.init(
        this.$refs.barChartBar,
        this.barChartTheme,
      );
      chartOn(window, "resize", this.resize);
      if (Object.keys(this.barChartData).length === 0) {
        this.barChartEcharts.setOption(this.barChartChartOptions);
      } else {
        let legendArr = [];
        let newSeries = [];
        this.barChartData.seriesList.forEach(item => {
          if (item.chartType === "bar") {
            legendArr.push(item.name);
            let obj = {
              name: item.name,
              type: item.chartType,
              data: item.data,
            };
            newSeries.push(obj);
          }
        });
        this.barChartChartOptions.legend.data = legendArr;
        this.barChartChartOptions.series = newSeries;
        this.barChartEcharts.setOption(this.barChartChartOptions);
      }
    },

    async pieChartGetChartData(params = {}) {
      this.$nextTick(() => this.pieChartInit());
    },
    pieChartInit() {
      this.pieChartEcharts = echarts.init(
        this.$refs.pieChartPie,
        this.pieChartTheme,
      );
      chartOn(window, "resize", this.resize);
      if (Object.keys(this.pieChartData).length === 0) {
        this.pieChartEcharts.setOption(this.pieChartChartOptions);
      } else {
        let legendArr = [];
        let newSeries = [];
        this.pieChartData.seriesList.forEach(item => {
          if (item.chartType === "pie") {
            legendArr.push(item.name);
            let obj = {
              name: item.name,
              type: item.chartType,
              data: item.data,
            };
            newSeries.push(obj);
          }
        });
        this.pieChartChartOptions.legend.data = legendArr;
        this.pieChartChartOptions.series = newSeries;
        this.pieChartEcharts.setOption(this.pieChartChartOptions);
      }
    },

    async lineChartGetChartData(params = {}) {
      this.$nextTick(() => this.lineChartInit());
    },
    lineChartInit() {
      this.lineChartEcharts = echarts.init(
        this.$refs.lineChartLine,
        this.lineChartTheme,
      );
      chartOn(window, "resize", this.resize);
      if (Object.keys(this.lineChartData).length === 0) {
        this.lineChartEcharts.setOption(this.lineChartChartOptions);
      } else {
        let legendArr = [];
        let newSeries = [];
        this.lineChartData.seriesList.forEach(item => {
          if (item.chartType === "line") {
            legendArr.push(item.name);
            let obj = {
              name: item.name,
              type: item.chartType,
              data: item.data,
            };
            newSeries.push(obj);
          }
        });
        this.lineChartChartOptions.legend.data = legendArr;
        this.lineChartChartOptions.series = newSeries;
        this.lineChartEcharts.setOption(this.lineChartChartOptions);
      }
    },

    gotoPage(functionPath) {
      this.$router.push({ path: functionPath });
    },
  },
};
</script>
